<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.css">
    <script src="/static/js/jquery-3.7.1.slim.js"></script>
    <script src="/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.js"></script>
    <script src="/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" href="/static/css/login/login.css">
</head>
<body>
<button></button>
<button type="button" class="btn btn-primary" id="primaryButton">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus"
   title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible
    popover</a>
<button type="button" class="btn btn-link">Link</button>
<h1 type="error">error</h1>
<table class="table">
    <thead class="thead-dark">
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

<table class="table">
    <thead class="thead-light">
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top"
        data-content="Top popover">
    Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right"
        data-content="Right popover">
    Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom"
        data-content="Bottom popover">
    Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left"
        data-content="Left popover">
    Popover on left
</button>
<div style="width: 100%;height: 200px" class="d-flex justify-content-between align-items-center">
    <button>hello</button>
    <button>hhe</button>
    <button>jjja</button>
</div>
<h1 class="text-hide">Custom heading</h1>
</body>
<script>
    $(document).ready(function () {
        // 在页面加载完成后，直接初始化 popover
        $('.popover-dismiss').popover({
            trigger: 'focus'
        })
    });

    $("#primaryButton").click(() => {
        $('.example-popover').popover({
            container: 'body'
        })
    });

    $("#primaryButton").click(()=>{
        alert("h")
    })
</script>
</html>